<!-- 文档类型声明 -->
<!DOCTYPE html>

<!-- 与文档类型声明一致，这里的 html 就是根元素 -->
<html lang="zh_CN">

    <head>
        <!-- 采用 meta 标签的 charset 属性可以告知将来渲染页面时使用的编码 -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>常用块元素</title>
    </head>

    <body style=" border : 1px solid red ; padding : 25px ;">

        <div style=" border : 1px solid red ; ">
            常用的块元素( block element ):
            div 、p 、pre 、 h1 ~ h6 、ol 、ul 、li 、dl 、dt 、dd 、hr 、fieldset
        </div>

        <hr>

        <div style=" border : 1px solid blue ; " >
            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <h4>四级标题</h4>
            <h5>五级标题</h5>
            <h6>六级标题</h6>
        </div>

        <p style=" border : 1px solid red ; ">落霞与孤鹜齐飞，秋水共长天一色</p>

        <pre style=" border : 1px solid green ; " >
public class Student {
    private String name ;
}
        </pre>

        <div style=" border : 1px solid blue ; " >
            <h3>有序列表( ordered list )</h3>
            <ol>
                <li>列表项目( list item )</li>
                <li>列表项目( list item )</li>
                <li>列表项目( list item )</li>
                <li>列表项目( list item )</li>
                <li>列表项目( list item )</li>
            </ol>
        </div>

        <hr>

        <div style=" border : 1px solid blue ; " >
            <h3>无序列表( unordered list )</h3>
            <ul>
                <li>列表项目( list item )</li>
                <li>列表项目( list item )</li>
                <li>列表项目( list item )</li>
                <li>列表项目( list item )</li>
                <li>列表项目( list item )</li>
            </ul>
        </div>

        <hr>

        <div style=" border : 1px solid blue ; " >
            <h3>定义列表( definition list )</h3>
            <dl>
                <dt style="background: #dedede ;">第一条</dt>
                <dd style="background: yellowgreen ;">不拿群众一针一线</dd>
                <dt style="background: #dedede ;">第二条</dt>
                <dd style="background: yellowgreen ;">不准虐待俘虏兵</dd>
            </dl>
        </div>

        <!--
        <fieldset style=" border : 1px solid blue ; ">
        </fieldset>
        -->

        
    </body>

</html>